<template>
	<view class="pageAll">
		<view class="content">
			<view class="stepTitle">
				第一步
			</view>
			<view class="stepInfo">
				<view class="fromInputLabel">
					<input v-model="form.name" class="formFood" type="text" @focus="inputName" @blur="inputNameBlur" @confirm="inputAddress" :focus="!myPalVisible.name"/>
					<view v-if="myPalVisible.name" class="fromInputLabelText" @click="inputName">
						<text class="palLeft">{{placeholder.name.left}}</text>
						<text class="palRight">{{placeholder.name.right}}</text>
					</view>
				</view>
				<view class="fromInputLabel">
					<input v-model="form.address" class="formAddress" type="text" @focus="inputAddress" @blur="inputAddressBlur" :focus="!myPalVisible.address" @confirm="inputQuality"/>
					<view v-if="myPalVisible.address" class="fromInputLabelText" @click="inputAddress">
						<text class="palLeft">{{placeholder.address.left}}</text>
						<text class="palRight">{{placeholder.address.right}}</text>
					</view>
				</view>
				<view class="fromQualityLabel">
					<!-- <input v-model="form.quality" class="fromQuality" type="text" @focus="inputQuality" @blur="inputQualityBlur" :focus="!myPalVisible.quality"/> -->
					<view v-if="myPalVisible.quality" @click="inputQuality"><text>{{placeholder.quality}}</text></view>
					<textarea :class="myPalVisible.quality ? 'hiddenQuality' : ''" v-model="form.quality" class="fromQuality" maxlength="-1" :focus="!myPalVisible.quality" @blur="inputQualityBlur"/>
				</view>
			</view>
			<view class="nextStep">
				<button @click="nextStep">
					下一步
				</button>
			</view>
		</view>
		<view class="bottomBtnView">
			<button class="bottomBtn" @click="saveDraft" hover-class="subActive">
				存为草稿
			</button>
		</view>
	</view>
</template>

<script>
	import { AvoidDoubleClick } from '@/utils/tools.js'
	import { ValidateReport } from '@/utils/tools.js'
	const avoidDoubleClick = new AvoidDoubleClick()
	export default {
		data() {
			return {
				form:{
					name:null,
					address:null,
					quality: null,
				},
				qualityPLa:'',
				myPalVisible:{
					name:true,
					address:true,
					quality:true,
				},
				placeholder:{
					name:{
						left:'请添加食材名称',
						right:'如: 山药'
					},
					address:{
						left:'请输入食材产地',
						right:'如: 广东省深圳市龙岗区'
					},
					quality:'请输入食材品质描述 \n \n \n 描述该食材的生长环境、天然味道、营养价值、本体烹饪方法及其他特点。 \n (不少于100字)',
				},
				isWorking: false, // 防止用户多次点击
			}
		},
		methods: {
			// 地址框，模拟占位符显示与隐藏
			inputAddress(){
				this.$set(this.myPalVisible, 'address', false)
			},
			inputAddressBlur() {
				if(this.form.address) {
					this.$set(this.myPalVisible, 'address', false)
				} else {
					this.$set(this.myPalVisible, 'address', true)
				}
			},
			// 食材名，模拟占位符显示与隐藏
			inputName(){
				
				this.$set(this.myPalVisible, 'name', false)
			},
			inputNameBlur() {
				if(this.form.name) {
					this.$set(this.myPalVisible, 'name', false)
				} else {
					this.$set(this.myPalVisible, 'name', true)
				}
			},
			// 品质描述，模拟占位符显示与隐藏
			inputQuality(e){
				this.$set(this.myPalVisible, 'quality', false)
			},
			inputQualityBlur() {
				if(this.form.quality) {
					this.$set(this.myPalVisible, 'quality', false)
				} else {
					this.$set(this.myPalVisible, 'quality', true)
				}
			},
			getNextInput(value) {
				this.$set(this.myPalVisible, value, false)
				console.log(this.myPalVisible[value], '456')
			},
			// 存为草稿
			saveDraft(){
				const validateReport = new ValidateReport()
				// 满足一项即可存为草稿
				if (this.form.name || this.form.address || this.form.quality) {
					// 如果存在值则对值进行校验， 否则不进行校验-----开始
					if(this.form.name) {
						if(!validateReport.vdItemNotNone(this.form.name, '食材名称')) {
							return false
						}
					}
					if(this.form.address) {
						if(!validateReport.vdItemNotNone(this.form.address, '食材产地')) {
							return false
						}
					}
					
					if(this.form.quality) {
						if(!validateReport.vdFoodQuality(this.form.quality)) {
							return false
						}
					}
					// 如果存在值则对值进行校验， 否则不进行校验-----结束
					
					if(avoidDoubleClick.isWork()) {
						return false
					}
					
					this.$store.commit('setCurrTag', 1)
					this.$store.commit('setReportDraft',  JSON.parse(JSON.stringify(this.form)))
					
					if(this.$store.getters.getReportDraft.id) {
						this.$api.selectDraftUpdate(
							this.$store.getters.getReportDraft
						)
						.then(res => {
							if(res.status) {
								uni.switchTab({
									url:'../foodReport/foodReport'
								})
							} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 1500,
									})
								}
							avoidDoubleClick.toRest()
						})
					} else {
						this.$api.selectDraft(
							this.$store.getters.getReportDraft
						)
						.then(res => {
							
							if(res.status) {
								uni.switchTab({
									url:'../foodReport/foodReport'
								})
							} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 1500,
									})
								}
							avoidDoubleClick.toRest()
						})
					}
					
				} else {
					
					uni.showToast({
						title: '请填写内容后再保存为草稿',
						duration: 2000,
						icon: 'none',
					})
		
				}
			},
			// 下一步
			nextStep() {
				const validateReport = new ValidateReport()
				// 全部满足才能到下一步
				if(validateReport.vdItemNotNone(this.form.name, '食材名称') && validateReport.vdItemNotNone(this.form.address, '食材产地') &&
				 validateReport.vdFoodQuality(this.form.quality)) {
					this.$store.commit('setReportDraft',  JSON.parse(JSON.stringify(this.form)))
					uni.redirectTo({
						 url: '../secondStep/secondStep'
					})
				}
			},
			getFormInfo(){
				const tempForm = this.$store.getters.getReportDraft
				this.$set(this.form, 'name', tempForm.name?tempForm.name:'')
				this.$set(this.form, 'address', tempForm.place_of_origin?tempForm.place_of_origin:'')
				this.$set(this.form, 'quality', tempForm.describe?tempForm.describe:'')
				for(const index in this.form) {
					if(this.form[index]) {
						this.myPalVisible[index] = false
					}
				}
			}
		},
		onLoad() {	
			this.getFormInfo()
		},
		onShareAppMessage: (options) => {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "红标HONBIAO", // 默认是小程序的名称(可以写slogan等)
				path: '/pages/indexPage/authorization/authorization', // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '/static/index/labelRouge.png', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: (res) => {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: () => {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			return shareObj
		},
	}
</script>

<style scoped>
	.pageAll {
		box-sizing: border-box;
		background-color: #fdf5f3;
		width: 100%;
		height: 100%;
		padding: 17upx;
		display: inline-block;
	}
	.content{
		box-shadow: 0 0 20upx 5upx rgba(240, 41, 41, 0.1);
		background-color: #FFF;
		padding: 22upx;
		height:744upx;
		border-radius: 10upx;
	}
	.stepTitle{
		font-size:36upx;
		color:#f7533e;
		text-align: center;
		letter-spacing: 10upx;
		padding: 10upx 0;
		font-weight: bold;
		box-sizing: border-box;
	}
	.stepInfo{
		font-size:32upx;
		color:#6f6f6f;
		margin-top: 17upx;
	}
	.formFood{
		background: #fdf7f6;
		padding: 0 20upx;
		border:1px solid #f2f2f2;
		border-radius: 10upx;
		margin-bottom: 17upx;
		height:95.33upx;
	}
	.formAddress{
		background: #fdf5f3;
		padding: 0 20upx;
		border:1px solid #f2f2f2;
		border-radius: 10upx;
		margin-bottom: 17upx;
		height:95.33upx;
	}
	.fromQuality{
		background: #fdf7f6;
		padding: 25upx 20upx 0 20upx;
		border:1px solid #f2f2f2;
		border-radius: 10upx;
		width:auto;
		height:321.33upx;
	}
	.fromQualityLabel{
		position: relative;
		display: block;
		margin-bottom: 17upx;
	}
	.fromQualityLabel textarea {
		position: relative;
		border: 1px solid #f2f2f2;
	}
	.hiddenQuality {
		height: 0px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
	}
	.fromQualityLabel text{
		border: 1px solid #f2f2f2;
		background: #fdf7f6;
		z-index: 100;
		display: inline-block;
		position: relative;
		top:0;
		left:0;
		width:auto;
		border-radius: 10upx;
		padding: 25upx 20upx 0 20upx;
		height:321.33upx;
	}
	.fromInputLabel{
		position: relative;
		display: block;
	}
	.fromInputLabel .fromInputLabelText{
		display: inline-block;
		position: absolute;
		top:0;
		left:0;
		line-height: 95.33upx;
		padding: 0 20upx;
		width:100%;
		pointer-events: none;
	}
	.fromInputLabelText text{
		pointer-events: none;
		display: inline-block;
	}
	.fromInputLabelText .palLeft{
		width:43%;
	}
	.nextStep{
		text-align: center;
		margin-top: 10upx;
	}
	.nextStep button{
		width:140upx;
		height:52upx;
		line-height: 52upx;
		color:#6f6f6f;
		font-size:32upx;
		background-color: #fdf5f3;
		padding: 0;
	}
	.nextStep button:active{
		background-color: #fdf7f6;
	}
	.nextStep button:after{
		padding: 0;
		border:1upx solid #eeeeee;
	}
	.bottomBtnView{
		text-align: center;
		margin-top: 100upx;
	}
	.bottomBtn{
		width:160upx;
		height:52upx;
		line-height: 52upx;
		color:#6f6f6f;
		font-size:32upx;
		background-color: #ff0000;
		color:#FFF;
		padding: 0;
	}
	.bottomBtn:after{
		border:none;
		padding: 0;
	}
	.subActive{
		background-color: #c90000 !important;
	}
	.placeholderClass{
		font-size:32upx;
		color:#6f6f6f;
	}
</style>
